<template>
	<view class="content">
		<view class="box-content">
			<u-row customStyle="margin-bottom: 8px">
				<u-col span="2">
					<u-avatar size="46" :src="author.avatar"></u-avatar>
				</u-col>
				<u-col span="6">
					<view>
						<u--text
							:text="author.nickname"
							type="primary"
							bold
							size="15"
						></u--text>
					</view>
					<view style="font-size: 13px;opacity: 0.5;">
						<text>{{posts.createTime}}</text>
					</view>
				</u-col>
				<u-col span="2" offset="2" v-if="userId==posts.userId">
					<u-button shape="circle" type="error" customStyle="font-weight: bold;margin-right: 5px;" size="small" text="删除帖子" @click="hintShow=true" color="rgb(255,87,87)"></u-button>
				</u-col>
			</u-row>
			<view >
				<u--text :text="posts.content" user-select></u--text>
			</view>
			<view class="picture-content">
				<u-album v-if="posts.imgUrls.length>0" :urls="posts.imgUrls" multipleSize="100" :space="8"></u-album>
			</view>
		</view>
		<view class="box-content" style="padding-bottom: 120rpx;">
			<view style="font-weight: bold;">
				<text>评论</text>
				<text style="margin-left: 10rpx;">{{posts.commentCount}}</text>
			</view>
			<view v-if="commentList.length!=0">
				<view v-for="item in commentList" :key="item.id" class="p-pad">
					<!-- 评论 -->
					<u-row customStyle="padding: 10rpx 0;" v-if="">
						<u-col span="2">
							<!-- 头像 -->
							<u-avatar size="36" :src="item.user.avatar"></u-avatar>
						</u-col>
						<u-col span="10" customStyle="margin-left: -30rpx;" @click="disposeReply(0,item)">
							<!-- 名称 -->
							<view>
								<text class="t-color">{{item.user.nickname}}</text>
								<text class="t-date">{{item.commentVo.createTime}}</text>
							</view>
							<!-- 评论内容 -->
							<view style="padding: 8rpx 0;">
								<u--text :line="5" :size="13" :text="item.commentVo.content" wordWrap="anywhere"></u--text>
							</view>
						</u-col>
						
					</u-row>
					<!-- 对评论回复 -->
					<view  v-for="(replyItem,index) in item.replyList" v-if="item.replyList.length>0" :key="index">
						<u-row customStyle="padding: 10rpx 0;" v-if="replyItem.target==null">
							<u-col span="1" offset="1" customStyle="margin-left: 84rpx;">
								<!-- 头像 -->
								<u-avatar size="28" :src="replyItem.user.avatar"></u-avatar>
							</u-col>
							<u-col span="10" customStyle="margin-left: 8rpx;" @click="disposeReply(1,replyItem)">
								<!-- 名称 -->
								<view>
									<text class="t-color">{{replyItem.user.nickname}}</text>
									<text class="t-date">{{replyItem.reply.createTime}}</text>
								</view>
								<!-- 评论内容 -->
								<view style="padding: 8rpx 0;">
									<u--text :line="5" :size="13" :text="replyItem.reply.content" wordWrap="anywhere"></u--text>
								</view>
							</u-col>
						</u-row>
						<!-- 对回复的回复 -->
						<u-row customStyle="padding: 10rpx 0;" v-else>
							<u-col span="1" offset="1" customStyle="margin-left: 84rpx;">
								<!-- 头像 -->
								<u-avatar size="28" :src="replyItem.user.avatar"></u-avatar>
							</u-col>
							<u-col span="10" customStyle="margin-left: 8rpx;" @click="disposeReply(2,replyItem)">
								<!-- 名称 -->
								<view>
									<text class="t-color">{{replyItem.user.nickname}}</text>
									<text>回复</text>
									<text class="t-color">{{replyItem.target.nickname}}</text>
									<text>:</text>
									<text class="t-date">{{replyItem.reply.createTime}}</text>
								</view>
								<!-- 评论内容 -->
								<view style="padding: 8rpx 0;">
									<u--text :line="5" :size="13" wordWrap="anywhere" :text="replyItem.reply.content"></u--text>
								</view>
							</u-col>
						</u-row>
					</view>
					
				</view>
			</view>
			<view v-else>
				<u-empty
				        mode="comment"
				        icon="http://cdn.uviewui.com/uview/empty/comment.png"
				>
				</u-empty>
			</view>
		</view>
		
		<view class="tabbar">
			<u-row customStyle="padding: 10rpx 10rpx" justify="between" gutter="2">
				<u-col span="2"><u-avatar size="38" :src="src"></u-avatar></u-col>
				<u-col span="7" customStyle="margin-left: -20rpx;">
					 <u--input
					    :placeholder="placeholder"
						customStyle="padding: 8rpx 16rpx;"
						placeholderStyle="font-size: 13px;"
					    border="surround"
						shape="circle"
					    v-model="value"
						:focus="inpFocus"
					    @change=""
						@blur="blur"
					  ></u--input>
				</u-col>
				<u-col span="3">
					<u-button 
						@click="commitComment" 
						type="primary" 
						shape="circle" 
						text="评论" 
						size="normal" 
						customStyle="height: 64rpx">
					</u-button>
				</u-col>
			</u-row>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- 提示框 -->
		<u-modal 
			:show="hintShow" 
			:showCancelButton="true" 
			:closeOnClickOverlay="true" 
			@confirm="finish" 
			@cancel="hintShow=false">
				<view class="slot-content">
					<text>是否确定删除该帖子内容?</text>
				</view>
		</u-modal>
	</view>
	
</template>

<script>
	import {getPostsDeatil, addComment, deletePost} from '@/utils/api.js'
	export default {
		data() {
			return {
				hintShow: false,
				userId: '',
				discussPostId: 0,
				posts: {},	//帖子详情
				author: {avatar:''},	//发帖作者
				commentList:[],	//评论列表
				value: '',
				placeholder: '请输入评论内容~',
				inpFocus: false,
				stairs: 0, //标记点击第几层: 0-未点击;1-第一层;2-第二层
				src: 'https://cdn.uviewui.com/uview/album/5.jpg',	//用户头像
				targetId: 0,
				entityId: 0,
				entityType: 1,
				type: 0,
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.discussPostId = option.id
			this.type = option.type
			this.userId = getApp().globalData.userInfo.id
			this.src = getApp().globalData.userInfo.avatar
			//console.log("userId", getApp().globalData.userInfo)
		},
		onReady() {
			this.postsDetail()
		},
		methods: {
			finish(){
				const _that = this
				_that.hintShow = false
				deletePost({id: _that.posts.id, status: 1, postsType: _that.type}).then(res => {
					getApp().globalData.toast[0].message = '删除成功'
					_that.$refs.uToast.show({
						...getApp().globalData.toast[0],
						complete() {
							//当前页
							let pages = getCurrentPages()
							//上个页面
							let beforePage = pages[pages.length - 2]
							let backUrl = beforePage.route
							beforePage.$vm.getList(1)
							if(backUrl.includes('index')){
								uni.$u.route({
									type: 'switchTab',
									url: backUrl
								})
							}else {
								uni.$u.route({
									type: 'back',
									delta: 1,
									animationType: 'pop-out',
									animationDuration: 200
								});
								
							}
						}
					})
				}).catch(err=>{})
			},
			//对评论或者回复进行回复
			disposeReply(sign, item){
				this.inpFocus = true
				this.placeholder = `回复${item.user.nickname}:`
				this.stairs = sign
				this.entityType = 2
				if(sign == 0){
					this.entityId = item.commentVo.id
				}else if(sign == 1){
					this.entityId = item.reply.entityId
				}else {
					this.entityId = item.reply.entityId
					this.targetId = item.user.id
				}
				
			},
			commitComment(){
				const comment = {
					postsId: this.posts.id,
					userId: 2,
					serveType: this.posts.type,
					content: this.value,
					entityType: this.entityType,
					entityId: this.entityId,
					targetId: this.stairs != 2 ? 0 : this.targetId
				}
				//console.log("commitComment", comment)
				const that = this
				addComment(comment).then(res => {
					if(res.code){
						getApp().globalData.toast[1].message = res.message
						this.$refs.uToast.show({
							...getApp().globalData.toast[1],
							complete() {
								//回调
							}
						})
						return
					}
					getApp().globalData.toast[0].message = '发表评论成功'
					this.$refs.uToast.show({
						...getApp().globalData.toast[0],
						duration: 1500,
						complete() {
							that.value = ''
							//重新拉取数据
							that.postsDetail()
						}
					})
				}).catch(err => {
					getApp().globalData.toast[1].message = err.message
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {},
					})
				})
				
			},
			postsDetail(){
				getPostsDeatil(this.discussPostId).then(res => {
					if(res.posts == null){
						getApp().globalData.toast[1].message = '您访问的内容不存在~'
						this.$refs.uToast.show({
							...getApp().globalData.toast[1],
							complete() {
								uni.$u.route({
									type: 'back',
									delta: 1,
									animationType: 'pop-out',
									animationDuration: 200
								});
							}
						})
						return
					}
					res.posts.imgUrls = res.posts.imgUrls!=null?res.posts.imgUrls.split(","):[]
					this.posts = res.posts
					this.author = res.user
					this.commentList = res.comments
					this.entityId = this.posts.id
				}).catch(err => {
					getApp().globalData.toast[1].message = '加载数据失败'
					this.$refs.uToast.show({
						...getApp().globalData.toast[1],
						complete() {
							uni.$u.route({
								type: 'back',
								delta: 1,
								animationType: 'pop-out',
								animationDuration: 200
							});
						}
					})
				})
			},
			blur(value){	//输入框失去焦点
				this.stairs = 0
				this.placeholder = '请输入评论内容~'
			},
			
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		background-color: rgb(242, 242, 242);
		.box-content {
			min-height: 300rpx;
			margin: 16rpx 0;
			padding: 18rpx 20rpx 30rpx 20rpx;
			background-color: #fff;
			.picture-content {
				margin-left: 28rpx;
				margin-top: 20rpx;
			}
			.p-pad {
				padding-top: 20rpx;
			}
			.t-date{
				font-size: 13px;
				margin-left: 20rpx;
			}
			.t-color{
				opacity: 0.4;
				font-size: 15px;
				font-weight: bold;
			}
			// .attention{
			// 	width: 85px;
			// 	height: 26px;
			// 	padding: 8rpx 0;
			// 	border-radius: 40rpx;
			// 	background-color: #f7f7f7;
			// 	text-align: center;
			// }
		}
		.tabbar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			z-index: 999;
			background: #fff;
			border-top: 2rpx solid #eee;
		}
	}
</style>
